<template>
  <div class="in-stock-wrap">
    <PageTop firstMenu="配料采购" secondMenu="采购汇总" title="采购汇总" :showAddBtn="false"></PageTop>

    <div class="item-wrap">
      <div class="count-item" :style="{'backgroundColor':'#E08E45'}">
        <div>
          <div class="pCount">{{res.order_count}}</div>
          <div>采购单总数</div>
        </div>
      </div>
      <div class="count-item" :style="{'backgroundColor':'#679289'}">
        <div>
          <div class="pCount">{{res.purchase_all_count}}</div>
          <div>采购配料数</div>
        </div>
        
      </div>
      <div class="count-item" :style="{'backgroundColor':'#007991'}">
        <div>
          <div class="pCount">{{res.total_amount}}</div>
          <div>采购总金额</div>
        </div>
      </div>
    </div>

    <el-date-picker
      v-model="date"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="small"
      value-format="yyyy-MM-dd">
    </el-date-picker>
    <div class="search-wrap">
      <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入采购订单单号/供应商关键字搜索"></el-input>
      <el-button plain size="small" type="primary" @click="getData">查询</el-button>
    </div>

    <el-table
      :data="tableData"
      style="width: 100%"
      :border="true"
      :fit="true"
      :stripe="true"
      size="mini"
      align="center">
      <!-- <el-table-column
        prop="id"
        label="id"
        min-width="100"
        align="center">
      </el-table-column> -->

      <el-table-column
        prop="created_at"
        label="采购时间"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="cg_order"
        label="采购单号"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="nickname"
        label="供应商名"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="materials_number"
        label="配料编号"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_name"
        label="配料名称"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="format_name"
        label="规格/型号"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="purchase_count"
        label="数量"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="materials_unit"
        label="单位"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="price"
        label="采购价"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="xiaoji_price"
        label="小计"
        min-width="120"
        align="center">
      </el-table-column>

    </el-table>

    
     <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>

    <el-button
    class="export"
    size="small"
    plain
    type="info"
    @click="down">导出</el-button>

  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Emit } from 'vue-property-decorator';
import deleteConfirm from '@/components/deleteConfirm.vue';
import ajaxResquest from '@/api/apiRequest';
import PageTop from '@/components/pageTop.vue';

@Component({
  components: {
    deleteConfirm,
    PageTop
  }
})
export default class AccountListTable extends Vue {
  // tableData: Array<any> = [];
  tableData: any[] = [];
  showMask: boolean = false;
  deleteId!: number;
  deleteRes!: ajaxResquest;
  keyword: string = '';

  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;

  res: any = {};

  date: string = '';
  $baseUrl!: any;
  el: string = '123';
  // @Emit('tableEdit')
  mounted() {
    this.deleteRes = new ajaxResquest('/purchase/orderPurchaseStatistics');
    this.getData();
  }
  // tableEdit(row: any) {
  //   // console.log(row);
  //   this.$to('produceCategoryCreate', { edit: true, id: row.id });
  // }
  // tableDelete(row: any) {
  //   console.log(row);
  //   this.deleteId = row.id;
  //   this.showMask = true;
  // }
  // closeDelete(row: object) {
  //   this.showMask = false;
  // }
  // deleteConfirm() {
  //   console.log('done');
  //   this.deleteRes.getFunction({ classId: this.deleteId }).then((res:any) => {
  //     if (res.data.code === 1) {
  //       this.getData();
  //       this.showMask = false;
  //     }
  //   });
  // }
  down() {
    console.dir(Window);
    let a = document.createElement('a');
    a.href = `${
      this.$baseUrl
    }/purchase/orderPurchaseStatisticsExport?Authorization=${
      sessionStorage.token
    }`;
    a.target = '_blank';
    a.click();
  }
  getData() {
    if (this.date === null) {
      this.date = '';
    }
    let data = {
      keyWord: this.keyword,
      page: this.page,
      pageSize: this.pageSize,
      btime: this.date[0],
      etime: this.date[1]
    };
    this.deleteRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        console.log(res.data.types);
        this.res = res.data.types;
        this.totalCount = res.data.types.count;

        this.tableData = res.data.types.data;
      }
    });
  }
}
</script>

<style lang="less">
.in-stock-wrap {
  height: 100%;
  padding: 15px;
  /* display: flex; */
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow-y: auto;
  text-align: left;
  position: relative;
  .search {
    margin-top: 15px;
    width: 250px;
    margin-right: 10px;
    margin-bottom: 15px;
  }
  .item-wrap {
    width: 100%;
    display: flex;
    height: 100px;
    margin-bottom: 15px;
    .count-item {
      width: 30%;
      // background-color: #999;
      color: #fff;
      // text-align: center;
      // line-height: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
    .count-item:nth-child(1) {
      margin-right: 4%;
    }
    .count-item:nth-child(2) {
      margin-right: 4%;
    }
    .pCount {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
    }
  }
  .page-count-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding: 0;
    margin-bottom: 15px;
  }
  .export {
    position: absolute;
    top: 15px;
    right: 15px;
  }
}
</style>

